<template>
    <div>
        <movie-swiper>
            <template #movieSwiper>
             <div class="swiper-slide" v-for="(image) in bannerData" :key="image.bannerId">
                <img :src="image.imgUrl" style="height:200px;" alt="">
            </div>
            </template>   
        </movie-swiper>
        <nav class="movie_nav">
            <ul>
                <router-link to="/movie/hotPlaying" active-class="on" tag="li"><span>正在热映</span></router-link>
                <router-link to="/movie/comingSoon" active-class="on" tag="li"><span>即将上映</span></router-link>
            </ul>
        </nav>
        <router-view></router-view>
    </div>
</template>


<script>
import http from '@/utils/http.js'
import movieSwiper from './movie/movieSwiper'
export default {
    components:{
        movieSwiper
    },
    data(){
        return{
            bannerData:[]
        }
    },
    created(){
        http({
          url:`/gateway?type=2&cityId=310100&k=5151033`,
          headers:{
                'X-Host': 'mall.cfg.common-banner'
          }//配置headers解决跨域问题
        }).then(res => {
        // console.log(res.data.data)
        this.bannerData = res.data.data})
    },
}
</script>

<style lang="scss" scoped>
    .movie_nav{
        margin-top:2px;
        width: 100%;
        text-align: center;
        ul{
            display: flex;
            li{
                line-height: 50px;
                flex: 1;
            }
            span{
                font-size:15px;
            }
        }
    }
    .on{
        border-bottom: 2px solid orange;
    }

</style>